<template>
  <div class="shop-info">
    <div class="top">
      <img class="shop-logo" :src="shopInfo.shopLogo" alt="" />
      <span class="shop-name">{{ shopInfo.name }}</span>
    </div>
    <div class="middle">
      <div class="shop-count">
        <div>
          <span>{{ shopInfo.cSells }}</span>
          <p>总销量</p>
        </div>
        <div>
          <span>{{ shopInfo.cGoods }}</span>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class="shop-score">
        <div
          class="score-item"
          :class="{ 'is-better': item.isBetter }"
          v-for="item in shopInfo.score"
          :key="item.name"
        >
          <span class="name">{{ item.name }}</span>
          <span class="score">{{ item.score }}</span>
          <span class="better">{{ item.isBetter ? "高" : "低" }}</span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <a :href="shopInfo.shopUrl">进店逛逛</a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shopInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style lang="less" scoped>
.shop-info {
  padding: 20px 0;
  border-bottom: 2px solid #eee;
  font-size: 12px;
  .top {
    padding: 0 10px;
    .shop-logo {
      width: 50px;
      height: 50px;
      border: 1px solid #666;
      border-radius: 50%;
      margin: 0 10px;
    }
  }
  .middle {
    display: flex;
    position: relative;
    padding: 20px 40px;
    & > div {
      flex: 1;
      text-align: center;
    }
    &::before {
      position: absolute;
      content: "";
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 1px;
      height: 50px;
      background-color: #999;
    }
    .shop-count {
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      align-items: center;
      & > div {
        flex: 1;
      }
    }
    .shop-score {
      .score-item {
        display: flex;
        justify-content: flex-end;
        margin-right: 30px;
        .score {
          width: 30px;
          text-align: left;
          margin: 0 5px;
          color: green;
        }
        .better {
          width: 1.1em;
          height: 1.1em;
          line-height: 1.2em;
          margin-top: 0.4em;
          color: #fff;
          background-color: green;
        }
      }
      .is-better {
        .score {
          color: red;
        }
        .better {
          color: #fff;
          background-color: red;
        }
      }
    }
  }
  .bottom {
    text-align: center;
    padding: 10px 0;
    a {
      padding: 5px 60px;
      background-color: #eee;
    }
  }
}
</style>
